<template>
  <div id="app">
    <h2>学生信息:</h2>
    <ul>
      <li v-for="student in students" :key="student.id">
        id:{{student.id}} name:{{student.name}} age:{{student.age}}
      </li>
    </ul>
    <button @click="getStudents">获取学生信息</button>
    <hr size="3" color="#f40">
    <h2>汽车信息:</h2>
    <ul>
      <li v-for="car in cars" :key="car.id">
        id:{{car.id}} name:{{car.name}} price:{{car.price}}
      </li>
    </ul>
    <button @click="getCars">获取汽车信息</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  components: {
  },
  data(){
    return{students:[],cars:[]}
  },
  methods:{
    getStudents(){
      axios.get('http://localhost:8080/api/students').then( //这里使用8080端口，因为代理服务器是8080端口，请求5000，拿到数据后还是会找8080要
          response=>{
            console.log("http://localhost:8080/students请求成功",response.data)
            this.students = response.data
          },
          error=>{
            console.log("请求失败了,",error.message)
          }
      )
    },
    getCars(){
      axios.get('http://localhost:8080/foo/cars').then(
          response=>{
            console.log("请求成功:",response.data)
            this.cars = response.data
          },
          error=>{
            console.log("请求失败了:",error.message)
          }
      )
    }
  }
}
</script>

<style>
/*#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}*/
</style>
